<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>用户列表</title>

  <meta charset="utf-8"/>
  <meta name="author" content=""/>
  <meta name="keywords" content=""/>
  <meta name="viewport" content="width=device-width,initial-scale=1"/>

  <script src="../js/jquery.min.js"></script>
  <script src="../bootstrap-3.3.7-dist/js/bootstrap.js"></script>
  <link rel="stylesheet" href="../css/jq22.css"/>
  <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.css"/>
</head>
<body>
<h3 style="text-align: center; padding: 10px;">用户列表展示</h3>
<hr style="margin: 0"/>
<div class="container">
  <table class="table table-bordered table-striped" style="margin-bottom: 0">
    <thead>
    <tr>
      <th>id</th>
      <th>username</th>
      <th>password</th>
      <th>age</th>
      <th>role</th>
      <th>loginDate</th>
    </tr>
    </thead>
    <tbody id="table_content">
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
    </tbody>
  </table>


  <nav aria-label="Page navigation" id="page_nav" style="text-align: center">
    <ul class="pagination">
      <li>
        <input type="hidden" id="prePage">
        <a href="javascript:void(0);" onclick="findAll($('#prePage').val())" aria-label="Previous">
          <span aria-hidden="true">&laquo;</span>
        </a>
      </li>
      <li class="active"><a href="javascript:void(0);">1</a></li>
      <li><a href="javascript:void(0);">2</a></li>
      <li><a href="javascript:void(0);">3</a></li>
      <li><a href="javascript:void(0);">4</a></li>
      <li><a href="javascript:void(0);">5</a></li>
      <li>
        <input type="hidden" id="nextPage">
        <a href="javascript:void(0);" onclick="findAll($('#nextPage').val())" aria-label="Next">
          <span aria-hidden="true">&raquo;</span>
        </a>
      </li>
    </ul>
  </nav>
</div>

</body>
<script>

  $(function () {
    findAll(1);
  });

  /** 查询. */
  var findAll = function (pageNum) {
    $.ajax({
      url: "../index",
      data: {
        pageNum: pageNum
      },
      type: "POST",
      dataType: "json",
      success: function (data) {
        if (data.success) {
          /* 获取总页数和总记录数. */
          var totalPages = data.data.totalPages;
          var pageInfo = {
            totalElements: data.data.totalElements,
            totalPages: totalPages,
            pageNum: 0,
            pageSize: data.data.size,
            nextPage: 0,
            prePage: 0
          };
          // 获取当前页码数
          var pageNum = data.data.number + 1;
          var nextPage = (pageNum + 1) > totalPages ? pageNum : (pageNum + 1);
          var prePage = pageNum > 1 ? pageNum - 1 : pageNum;
          pageInfo.pageNum = pageNum;
          pageInfo.nextPage = nextPage;
          pageInfo.prePage = prePage;
          $("#nextPage").val(nextPage);
          $("#prePage").val(prePage);
          console.info(pageInfo);

          // 先清空列表.
          var content = $("#table_content").html("");
          var dataList = data.data.content;
          for (var i = 0; i < dataList.length; i++) {
            content += "<tr>" +
                "<td>" + dataList[i].id + "</td>" +
                "<td>" + dataList[i].username + "</td>" +
                "<td>" + dataList[i].password + "</td>" +
                "<td>" + dataList[i].age + "</td>" +
                "<td>" + dataList[i].role + "</td>" +
                "<td>" + dataList[i].loginDate + "</td>" +
                "</tr>";
          }
          $("#table_content").html(content);
        }
      }
    });
  };
</script>
</html>